<template>
	<view class="login-box">
		<view class="uni-header">
			<view class="uni-group"><view class="uni-title">志愿者注册</view></view>
		</view>
		<view class="uni-container">
			<uni-forms ref="form" validateTrigger="bind" :rules="rules" @submit="submit">
				<uni-forms-item name="username" label="账户">
					<input ref="usernameInput" class="uni-input-border" type="text" placeholder="账户" @blur="binddata('username', $event.detail.value)" />
				</uni-forms-item>

				<uni-forms-item name="password" label="密码">
					<input value="123456" class="uni-input-border" :password="showPassword" placeholder="密码" @blur="binddata('password', $event.detail.value)" />
					<text class="uni-icon-password-eye pointer" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
				</uni-forms-item>

				<!-- <uni-forms-item name="passwordConfirmation" :errorMessage="errorMessage" label="确认密码">
					<input
					  value="123456"
						ref="passwordInput"
						@confirm="confirmForm('passwordConfirmation', $event.detail.value)"
						@blur="binddata('passwordConfirmation', $event.detail.value)"
						class="uni-input-border"
						:password="showPasswordAgain"
						placeholder="确认密码"
					/>
					<text class="uni-icon-password-eye pointer" :class="[!showPasswordAgain ? 'uni-eye-active' : '']" @click="changePasswordAgain">&#xe568;</text>
				</uni-forms-item> -->

				<uni-forms-item label="手机号" name="mobile" :errorMessage="errorMessage">
					<input value="123456" ref="mobileInput" class="uni-input-border" type="text" placeholder="手机号" @blur="binddata('mobile', $event.detail.value)" />
				</uni-forms-item>

				<uni-forms-item label="邮箱" name="email" :errorMessage="errorMessage">
					<input value="123456@163.com" ref="emailInput" class="uni-input-border" type="text" placeholder="邮箱" @blur="binddata('email', $event.detail.value)" />
				</uni-forms-item>

				<uni-forms-item label="擅长领域" name="specialty" :errorMessage="errorMessage">
					<input ref="specialtyInput" class="uni-input-border" type="text" placeholder="擅长领域" @blur="binddata('specialty', $event.detail.value)" />
				</uni-forms-item>

				<uni-forms-item label="志愿类型" name="type" :errorMessage="errorMessage">
					<picker class="picker" mode="selector" :range="volunteerTypeList" range-key="title" :value="volunteerTypeIndex" @change="changeVolunteerType">
						<view class="picker_content">{{ volunteerTypeList[volunteerTypeIndex].title }}</view>
					</picker>
				</uni-forms-item>
				
				<uni-forms-item label="学校" name="school">
				  <picker class="picker" mode="selector" @change="changeSchoolList" :range="schoolList" range-key="schoolList[schoolTypeIndex]" :value="schoolTypeIndex">
				    <view class="picker_content">{{ schoolList[schoolTypeIndex] }}</view>
				  </picker>
				</uni-forms-item>

				<view class="uni-button-group">
					<button class="uni-button" type="primary" :loading="loading" :disabled="loading" @click="submitForm">创建</button>
					<button class="uni-button" type="default" @click="back">返回</button>
				</view>
			</uni-forms>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>
<script>
import { mapMutations, mapActions } from 'vuex';
import config from '@/admin.config.js'
export default {
	data() {
		return {
			showPassword: true,
			showPasswordAgain: true,
			loading: false,
			errorMessage: '',
			formData: {
				"username": "",
				"password": "123456",
				"role": [],
				"mobile": "",
				"email": "",
				"specialty": "",
				"school": "",
				"type": "",
				"status": true  //默认启用
			},
			passwordConfirmation: '',
			rules: {
				// 对name字段进行必填验证
				username: {
					rules: [
						{
							required: true,
							errorMessage: '请输入账户'
						},
						{
							minLength: 3,
							maxLength: 30,
							errorMessage: '账户长度在{minLength}到{maxLength}个字符'
						}
					]
				},
				// 对email字段进行必填验证
				password: {
					rules: [
						{
							required: true,
							errorMessage: '请输入密码'
						},
						{
							minLength: 6,
							errorMessage: '密码长度大于{minLength}个字符'
						}
					]
				},
				passwordConfirmation: {
					rules: [
						{
							required: true,
							errorMessage: '请输入确认密码'
						},
						{
							minLength: 6,
							errorMessage: '密码长度最小{minLength}个字符'
						}
					]
				}
			},
			volunteerTypeList: [],
			volunteerTypeIndex: 0,
			schoolList: [],
			schoolTypeIndex: 0
		};
	},
	created: function() {
		this.getTypeList()
	},
	mounted() {
		// #ifdef H5
		this.focus();
		// #endif
		this.binddata('type', this.volunteerTypeList[this.volunteerTypeIndex].type)
	},
	methods: {
		...mapMutations({
			setToken(commit, tokenInfo) {
				commit('user/SET_TOKEN', tokenInfo);
			}
		}),
    getTypeList() {
      this.volunteerTypeList = [{ type: 'server', title: '服务' }, { type: 'logistics', title: '后勤' }, { type: 'plan', title: '策划' }];
      this.schoolList = ["清华","北大","复旦"];
    },
		register(formData) {
			// #ifdef H5
			// this.$refs.passwordInput.$refs.input.blur();
			// #endif
			this.loading = true;
			formData.state = 0
      formData.role = ['volunteer']
			this.$request('user/register2', formData)
				.then(res => {
					uni.showModal({
						title: '提示',
						content: res.code ? res.message : '创建成功',
						showCancel: false,
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				})
				.catch(err => {})
				.finally(err => {
					this.loading = false;
				});
		},
		submit(event) {
			if (this.loading) {
				return;
			}
			const { errors, value } = event.detail;
			if (errors) return;
			this.register(value);
			// if (value.password === value.passwordConfirmation) {
			// 	this.register(value);
			// } else {
			// 	this.errorMessage = '两次输入密码不相同';
			// }
		},
		confirmForm(name, value) {
			this.binddata(name, value);
			this.submitForm();
		},
		submitForm() {
			this.errorMessage = '';
			this.$refs.form.submit();
		},
		back() {
			uni.redirectTo({
				url: config.login.url
			});
		},
		changePassword: function() {
			this.showPassword = !this.showPassword;
		},
		changePasswordAgain: function() {
			this.showPasswordAgain = !this.showPasswordAgain;
		},
		// #ifdef H5
		focus: function() {
			this.$refs.usernameInput.$refs.input.focus();
		},
		// #endif
		changeVolunteerType(val) {
			this.volunteerTypeIndex = val.detail.value;
			this.binddata('type', val.detail.value.type)
		},
		/**
		 * 学校
		 */
		changeSchoolList (event) {
			this.schoolTypeIndex = event.target.value
			this.formData.school = this.schoolList[0]
		},
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	display: flex;
	/* align-items: center; */
	justify-content: center;
	background-color: #fff;
	/* #ifndef H5 */
	padding-top: 85px;
	/* #endif */
}

.login-box {
	position: relative;
	max-width: 420px;
	flex: 1;
	padding: 40px 35px 0;
	margin: 0 auto;
	overflow: hidden;
}

.uni-button {
	width: 184px;
}

.picker {
	width: 100%;
	&_content {
		width: 100%;
		background: none;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		height: 35px;
		line-height: 35px;
		padding: 0 10px;
		box-sizing: border-box;
	}
}
</style>
